import React, { Component } from 'react'

class Detail extends Component{
    // state={data:{}}    //{}得到对象
    // componentDidMount(){
    //     fetch('https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312')
    //     .then(res=>res.json())
    //     .then(res=>{
    //         console.log(res);
    //         this.setState({data:res.data});
    //     })
    // }
    render(){
        return(
            <h1>{this.props.data.title}</h1>
        )
    }
}

class Hoc extends Component {
    // state={data:[]}
    // componentDidMount(){
    //     fetch('https://cnodejs.org/api/v1/topics')
    //     .then(res=>res.json())
    //     .then(res=>{
    //         console.log(res);
    //         this.setState({data:res.data.slice(0,3)});
    //     })
    // }
    render() {
        return (
            <div>
                {
                    this.props.data.map(item => <li key={item.id}>{item.title}</li>)
                }
            </div>
        )
    }
}


const widthFetch = (Com,url)=>{    //接收一个组件,Com是形参(Com接收)

    return class WrapCom extends Component{      //返回一个组件
        state={data:[]}    
        componentDidMount(){
            fetch(url)
            .then(res=>res.json())
            .then(res=>{
                console.log(res);
                this.setState({data:res.data});
            })
        }
        render(){
            return(
                <div>
                    <Com data={this.state.data}/>
                </div>
            )
        }

    }
}
const NewHoc = widthFetch(Hoc,'https://cnodejs.org/api/v1/topics')//高阶函数
export default NewHoc;
export const NewDetail = widthFetch(Detail,'https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312')